<template>
  <!-- <el-col :span="control.span"> -->
  <el-col
    :xs="24"
    :sm="control.type == 'table' ? 24 : 12"
    :md="control.span | spanFileter"
    :lg="control.span | spanFileter"
    :xl="control.span | spanFileter"
  >
    <div
      v-if="control.type == 'empty' && isEditForm"
      style="height: 10px; text-align: center; color: #999999; height: 500px"
    >
      拖拽左边的组件到这里
    </div>
    <control
      v-if="control.type != 'empty'"
      :class="{ 'dynamic-col': isEditForm, 'dynamic-col-default': !isEditForm }"
      :isEditForm="isEditForm"
    >
      <template v-if="control.type == 'table'">
        <el-form-item :label="control.label"> </el-form-item>
        <formItemTable
          :control="control"
          v-model="thisValue"
          :isEdit="isEdit"
        ></formItemTable>
      </template>

      <template v-else-if="control.type == 'textarea'">
        <el-form-item :label="control.label"> </el-form-item>
        <formItem
          :control="control"
          v-model="thisValue"
          @change="change"
          :isEdit="isEdit"
        ></formItem>
      </template>

      <el-form-item v-else :label="control.label" :prop="control.field">
        <formItem
          :control="control"
          v-model="thisValue"
          @change="change"
          :isEdit="isEdit"
        ></formItem>
      </el-form-item>
      <div v-if="isEditForm">
        <el-tooltip
          class="item"
          effect="dark"
          content="编辑组件信息，点击编辑在右侧配置组件属性"
          placement="top"
        >
          <el-button type="text" @click="$emit('edit')">
            <!-- <i class="el-icon-edit"></i> -->
            编辑
          </el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="复制一个组件插入到编辑面板"
          placement="top"
        >
          <el-button type="text" @click="$emit('copy')">
            <!-- <i class="el-icon-document-copy"></i> -->
            复制
          </el-button>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="删除组件"
          placement="top"
        >
          <el-button type="text" @click="$emit('remove')">
            <!-- <i class="el-icon-delete"></i> -->
            删除
          </el-button>
        </el-tooltip>
      </div>
    </control>
  </el-col>
</template>

<script>
import control from "./control";
import formItem from "./formItem";
import formItemTable from "./formItemTable";
export default {
  name: "dynamicCol",
  components: { control, formItem, formItemTable },
  props: {
    control: {
      type: Object,
      default() {
        return {
          // span: 12,
          // type: "string",
          // field: "field",
          // label: "label",
          // default: "",
          // options: [],
        };
      },
    },
    value: {},
    isEdit: {
      type: Boolean,
      default: false,
    },
    isEditForm: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    event: "change",
    prop: "value",
  },
  filters: {
    spanFileter(span) {
      return isNaN(span) ? 8 : Number(span);
    },
  },
  watch: {
    value() {
      this.thisValue = this.value;
    },
  },
  data() {
    return {
      thisValue: "",
    };
  },
  mounted() {
    this.thisValue = this.value;
  },
  methods: {
    change(newValue) {
      this.$emit("change", newValue);
    },
  },
};
</script>

<style>
.dynamic-col {
  outline: solid 1px #ddd;
  padding: 5px;
  cursor: move;
  margin-bottom: 5px;
}
.dynamic-col:hover {
  outline: solid 1px #699;
  cursor: move;
}
.dynamic-col-default {
  /* background: rgba(240, 240, 240, 0.5); */
  padding: 0px 5px 0px 5px;
  margin-bottom: 4px;
  /* border-radius: 3px; */
}
</style>